﻿import React, { PureComponent } from 'react';
import { Carousel } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
// 样式
import styles from './YhglContrast.less';
//问题状态映射
const wtztGroup = {
  '0': '待分派',
  '1': '未处理',
  '2': '处理中',
  '3': '已处理',
  '4': '退单',
  '9': '已结案',
};
@connect()
class YhglContrast extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      imageFiles: [], // 照片
    };
    this.dispatch = this.props.dispatch;
    this.GetMediafiles = this.GetMediafiles.bind(this);
  }

  componentDidMount() {
    this.GetMediafiles();
  }

  GetMediafiles() {
    var r = this.props.record;
    this.dispatch({
      type: 'maintain/fetchGetMediafiles',
      payload: {
        id: r.id,
      },
      callback: response => {
        this.setState({ imageFiles: response.data });
      },
    });
  }

  render() {
    var r = this.props.record;
    var s = this.state;
    var bef_pics = s.imageFiles
      ? s.imageFiles.map(i => {
          if (i.lx == 1) {
            return (
              <div>
                <img className={styles.popimg} src={'http://static.dingtalk.com/media/' + i.wjlj} />
              </div>
            );
          }
        })
      : null;
    var bef_cal = <Carousel arrows autoplay style={{ width: 460, height: 550 }}>{bef_pics}</Carousel>;

    var aft_pics = s.imageFiles
      ? s.imageFiles.map(i => {
          if (i.lx == 2) {
            return (
              <div>
                <img className={styles.popimg} src={'http://static.dingtalk.com/media/' + i.wjlj} />
              </div>
            );
          }
        })
      : null;
    var aft_cal = <Carousel>{aft_pics}</Carousel>;
    debugger;

    return (
      <table className={styles.problemTb}>
        <tbody>
          <tr>
            <td className="problemTbLabel">问题描述：</td>
            <td colSpan="3">{r && r.wtms ? r.wtms : '暂无'}</td>
          </tr>
          <tr>
            <td className="problemTbLabel">上传时间：</td>
            <td colSpan="3">
              {r && r.sbsj ? moment(Date(r.sbsj.slice(6, -2))).format('YYYY-MM-DD HH:mm') : '暂无'}
            </td>
          </tr>
          <tr>
            <td className="problemTbLabel">处理情况：</td>
            <td colSpan="3">{r ? wtztGroup[r.wtzt] : '暂无'}</td>
          </tr>
          <tr>
            <td className="problemTbLabel">问题照片：</td>
            <td>{bef_cal}</td>
            <td className="problemTbLabel">反馈照片：</td>
            <td>{aft_cal}</td>
          </tr>
          <tr>
            <td className="problemTbLabel">反馈说明：</td>
            <td colSpan="3">{r && r.cljgms ? r.cljgms : '暂无'}</td>
          </tr>
          <tr>
            <td className="problemTbLabel">反馈时间：</td>
            <td colSpan="3">
              {r && r.clsj ? moment(Date(r.clsj.slice(6, -2))).format('YYYY-MM-DD HH:mm') : '暂无'}
            </td>
          </tr>
        </tbody>
      </table>
    );
  }
}

export default YhglContrast;
